<script lang="ts" setup>
import lineBg from "@/static/stroke.svg";

export interface TabsProps {
  name: string;
}
// props
const props = withDefaults(
  defineProps<{
    tabs: Array<TabsProps>;
    current?: number;
    disable?: boolean;
  }>(),
  {
    tabs: () => [],
    current: 0,
    disable: false
  }
);
// data

// computed
// emit
const emit = defineEmits(["selected-tab"]);

const onClick = (item: any) => {
  emit("selected-tab", item.index);
};
const showTip = () => {
  uni.showToast({
    title: "正在对话...请勿切换",
    icon: "none"
  });
};
</script>
<template>
  <view :class="['tab-container', { disable }]">
    <uv-tabs
      class="tabs"
      :current="current"
      :list="props.tabs"
      :lineColor="`url(${lineBg}) 100% 100%`"
      lineWidth="31rpx"
      lineHeight="11rpx"
      activeStyle="font-size:15px;color:#4059FD;font-weight:600;"
      inactiveStyle="font-size:15px;color:#63657C;font-weight:400;"
      itemStyle="padding-bottom: 15rpx;padding-left: 2px;"
      @click="onClick"
    ></uv-tabs>
    <view class="baffle" @click.stop="showTip"></view>
  </view>
</template>
<style lang="scss" scoped>
.tab-container {
  position: relative;
  width: 100%;
  &.disable {
    .baffle {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      top: 0;
      left: 0;
    }
  }
}
.tabs {
  flex: 1;
  width: 100%;
  /* margin: 0 10px; */
  /* width: 320px; */
}
:deep(.uni-scroll-view) {
  /* overflow-x: scroll !important; */
  &::-webkit-scrollbar {
    height: 0;
  }
}
.header {
  padding: 20rpx 0;
}
.items {
  width: 532rpx;
}
.item {
  flex-basis: 50%;
  text-align: center;
  color: #63657c;
  &.selected {
    color: #17181c;
  }
}
.icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
